<template>
    <div>
        <div style="margin-bottom: 30px">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
                <el-breadcrumb-item>评论管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table
                ref="table"
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" class="demo-table-expand">
                        <el-form-item label="评论编号：">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="创建时间：">
                            <span>{{ props.row.createtime }}</span>
                        </el-form-item>
                        <el-form-item label="评论内容：">
                            <span>{{ props.row.content }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
                    prop="id"
                    label="评论编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="createtime"
                    label="评论时间"
                    width="180">
            </el-table-column>
            <!--            新闻编号-->
            <el-table-column
                    prop="foreignId"
                    label="新闻编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="newtitle"
                    label="新闻标题"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="评论内容">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="评论人">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作">
                <template v-slot="scope">
                    <!--                  审核按钮-->
                    <el-button v-if="scope.row.status === '0'" type="success" size="small"
                               @click="handleCheck(scope.$index, scope.row)">审核
                    </el-button>
                    <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-top: 10px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.formInline.pageNum"
                :page-sizes="pageSizes"
                :page-size="this.formInline.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "demo",
    components: {},
    data() {
        return {
            tableData: [],
            pageSizes: [4, 6, 8, 10],
            total: 0,
            formInline: {
                pageNum: 1,
                pageSize: 10,
                // commenter: '',
                // newtitle: '',
                // ischeck: '',
            }
        };

    },
    created() {
            this.getCommentList();
    },
    methods: {
        resetForm() {
            this.formInline = {
                pageNum: 1,
                pageSize: 10,

            };
            this.getCommentList();
        },
        handleCheck() {
            this.$message({
                type: 'success',
                message: '审核成功!'
            });
        },
        //获取评论列表
        getCommentList() {
            this.request.get('/comment/page', {
                params: {
                    pageNum: this.formInline.pageNum,
                    pageSize: this.formInline.pageSize,
                }
            }).then(res => {
                console.log(res)
                this.tableData = res.content;
                this.total = res.totalElements;
            })
        },
        //分页
        handleSizeChange(val) {
            this.formInline.pageSize = val;
            this.getCommentList();
        },
        handleCurrentChange(val) {
            this.formInline.pageNum = val;
            this.getCommentList();
        },
        //删除
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const res = await this.request({
                    url: '/comment/delete',
                    method: 'delete',
                    params: {
                        id: row.id,
                        foreignId: row.foreignId,
                    }
                })
                if (res === true) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getCommentList();
                } else {
                    this.$message.error(res);
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

    }
}
</script>

<style scoped>
.demo-table-expand {
    margin-left: 100px;
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>
